/* eslint-disable @typescript-eslint/no-var-requires */
import React, { useEffect, useState } from 'react';
import styles from './index.module.less';
import Button from '@/components/button-card';
import { formatMoment } from '@/utils/time-utils';
import Avatar from '@/components/avatar';
import NoData from '../no-data';
import {
  APPROVAL_STATUS,
  ZHIDAN_STATUS,
  ZHIDAN_STATUS_NAME,
  ApprovalColor
} from '@/pages/declare/constants';

interface DocData {
  crtUserImg: string;
  crtUserName: string;
  documentTitle: string;
  documentName: string;
  draftTitle: string;
  status: number;
  crtTime: any;
  matterName?: string;
  formData: { label: string; value: string }[];
  applyName?: string;
  cardTitle?: string;
  procStatus?: number;
  documentEnterType?: number; // 公文类型 1-线上 2-线下
  zhiDanState?: string; // 已制单状态
}

interface Props {
  data: DocData;
  hasAvatar?: boolean; // 是否带有头像
  hasButton?: boolean; // 是否带有 button
  withStatus?: boolean; // 是否带有状态 tag
  matter?: boolean;
  [propName: string]: any;
}

enum Type {
  DOC = 'DOC',
  APPLY = 'APPLY',
}

const ApproveCard: React.FC<Props> = (props) => {
  // BatchApprovalButtonStyle批量审批页面的按钮样式
  const {
    data,
    hasAvatar,
    hasButton,
    withStatus,
    from,
    BatchApprovalButtonStyle
  } = props;
  const [transData, setTransData] = useState(data);

  useEffect(() => {
    // test
    // data = { ...data, ...{ zhiDanState: "4" } }
    setTransData(data);
  }, [data]);

  const getTime = (time: any) => {
    time = formatMoment(time);
    const timeStr = time.calendar(null, {
      sameDay: 'HH:mm',
      lastDay: '[昨天] HH:mm',
      beforeLastDay: '[前天] HH:mm',
      otherYears: 'YYYY-MM-DD HH:mm',
      sameElse: 'MM-DD HH:mm'
    });
    return timeStr;
  };

  const getStatusText = () => {
    const zhiDanState = transData?.zhiDanState || '';
    const isShowZD = ['4', '5'].includes(zhiDanState);
    if (isShowZD) {
      return ZHIDAN_STATUS_NAME[zhiDanState];
    }
    // 申报类型
    switch (transData.procStatus || transData.status) {
      case APPROVAL_STATUS.Draft:
        return '草稿';
      case APPROVAL_STATUS.Approvaling:
        return '审批中';
      case APPROVAL_STATUS.Pass:
        return '已通过';
      case APPROVAL_STATUS.Reject:
        return '已拒绝';
      case APPROVAL_STATUS.Revert:
        return '已撤销';
      default:
        return '';
    }
  };

  const onPass = (e) => {
    e.stopPropagation();
    props.onPass && props.onPass(transData);
  };

  const onReject = (e) => {
    e.stopPropagation();
    props.onReject && props.onReject(transData);
  };

  const getColor = () => {
    if (transData?.zhiDanState === ZHIDAN_STATUS.IsReturn) {
      return ApprovalColor[String(APPROVAL_STATUS.Reject)];
    }
    return ApprovalColor[String(transData.procStatus || transData.status)];
  };

  // console.log('transData:', transData);
  return (
    <div
      className={`${styles['wrap']} ${
        from === 'BatchApproval' && styles['BatchApproval']
      } ${BatchApprovalButtonStyle && styles['BatchApprovalButtonStyle']}`}
    >
      <div className={styles['title']}>
        <div className={styles['left-part']}>
          {hasAvatar && (
            <div className={styles['title-pic']}>
              <Avatar name={transData.crtUserName} />
            </div>
          )}
          <p className={styles['title-text']}>
            <NoData value={transData.cardTitle} />
          </p>
        </div>
        {withStatus && (
          <span className={`${getColor()} ${styles['status-box']}`}>
            {getStatusText()}
          </span>
        )}
      </div>
      <div className={styles['detail-info']}>
        {Array.isArray(transData?.formData) &&
          transData?.formData?.map(
            (item: { label: string; value: string }, index: number) => (
              <div className={styles['info-item']} key={index}>
                <span className={styles['info-item-title']}>{item.label}</span>
                <span className={styles['info-item-content']}>
                  {item.value}
                </span>
              </div>
            )
          )}
      </div>
      <div
        className={`${styles['footer-box']} ${
          from === 'home' || hasButton ? '' : styles['footer-box-border']
        }`}
      >
        <p className={styles['time']}>{getTime(transData.crtTime)}</p>
        {hasButton && (
          <div className={styles['button-wrap']}>
            <Button btntype='ensure' onClick={onPass}>
              同意
            </Button>
            <Button btntype='cancel' onClick={onReject}>
              拒绝
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};

export default ApproveCard;
